<template>
	<!-- 地区选择列表 -->
	<view class="r_list">
		<view class="">
			<view class="r_title">当前定位</view>
			<view class="r_city" @click="sumbit(city)">
				<text class="yticon icon-icon-test"></text>
				<text style="color: #000;">{{city}}</text>
			</view>
		</view>
		<view class="r_items" v-for="(item,i) in Citylist" :key="i">
			<view class="r_title" >
				{{item.areaname}}
			</view>
			<view class="r_item_l" >
				<view class="r_item" @click="sumbit(iitem.areaname)" v-for="(iitem,ii) in item.clist" :key="ii">
					{{iitem.areaname}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Citylist: [],
				city:'',
			}
		},
		onLoad(option) {
			this.city=option.city;
			this.getCitylist();
		},
		methods: {
			sumbit(e){
				uni.$emit("cityChange",{city:e});
				// this.$navTo('/pages/index/index');
				uni.navigateBack()
			},
			getCitylist() {
				this.$axios('o2o/getCity', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.Citylist = res.data.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		color: $font-color-dark;
	}

	.r_list {
		padding-bottom: 100upx;
	}
	.r_city{
		background: #ffffff;
		display: flex;
		align-items: center;
		// justify-content: center;
		// width: 200upx;
		line-height: 50upx;
		margin-left: 20upx;
	}
	.r_city .yticon{
		color: #F0AD4E;
	}
	.r_title {
		line-height: 50upx;
		padding: 0 20upx;
		background: $bg-color;
		color: #fff;
		font-weight: bold;
		font-size: 30;
	}

	.r_item_l {
		background-color: #fff;
	}

	.r_item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		line-height: 70upx;
		padding: 0 20upx;
	}
</style>
